import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import "./Device.css";
import LeftTop from "./LeftTop";
import LeftCanter from "./LeftCanter";
import LeftBottom from "./LeftBottom";
import Map from "./Map";
function device() {
  return (
    <div className="Home">
      <header>
        <img src="../public/images/Top.png" alt="" />
      </header>
      <main>
        <div className="m-Left">
          <div className="m-l-Top">
            <div className="L-t-Top">设备统计</div>
            <div className="L-t-Bottom">
              <LeftTop></LeftTop>
            </div>
          </div>
          <div className="m-l-Canter">
            <div className="L-c-Top">实时用电</div>
            <div className="L-c-Canter">
              <dl>
                <dt>
                  <img src="../../../public/images/电.png" alt="" />
                </dt>
                <dd>
                  <p>9308</p>
                  <p>总用电量(kw)</p>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="../../../public/images/电.png" alt="" />
                </dt>
                <dd>
                  <p>387</p>
                  <p>总用电量(kw/H)</p>
                </dd>
              </dl>
            </div>
            <div className="L-c-Bottom">
              <LeftCanter></LeftCanter>
            </div>
          </div>
          <div className="m-l-Bottom">
            <div className="L-b-Top">场地使用</div>
            <div className="L-b-Bottom">
              <LeftBottom></LeftBottom>
            </div>
          </div>
        </div>
        <div className="m-Canter">
          <header className="map">
            <Map></Map>
          </header>
          <footer>
            <dl>
              <dt>
                <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1df7f0ff25e5271b42b58cbdbc2ff8be66fdbd6d68dfdd40f4978b308e261b05"
                  alt=""
                />
              </dt>
              <dd>
                <Link className="dd1" to={"/"}>
                  智能检测
                </Link>
              </dd>
            </dl>
            <dl>
              <dt>
                <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng4ce04898f7dd6a02dfcf4ed394c316356fe39dc2ac66531bb7bccca6d2c30dfb"
                  alt=""
                />
              </dt>
              <dd>
                <Link className="dd1" to={"/Obtain"}>
                  就业态势
                </Link>
              </dd>
            </dl>
            <dl>
              <dt>
                <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8114ee381228a95d458fa185b435fb87df428e434979145cf8e9b82087b6c0a8"
                  alt=""
                />
              </dt>
              <dd>
                <Link className="dd1" to={"/Security"}>
                  安防管理
                </Link>
              </dd>
            </dl>
            <dl>
              <dt>
                <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngd4cb52635ec5eea62d892c9fec622eaf5b6cce8214c2a5a0fef0331b55e11c44"
                  alt=""
                />
              </dt>
              <dd>
                <Link className="dd1" to={"/Device"}>
                  设备运维
                </Link>
              </dd>
            </dl>
          </footer>
        </div>
        <div className="m-Right">
          <img src="/public/images/设备.png" alt="" />
        </div>
      </main>
    </div>
  );
}
export default device;
